<!DOCTYPE html>
<html>
<body>
<style>
input::-webkit-calendar-picker-indicator,
input::-webkit-inner-spin-button {
    opacity: 1;
}
</style>
<datalist id="dl1">
<option>1</option>
</datalist>
<dl>
<dt>Datalist follows:
<dd><input type="number" list="dl1">
<dt>Empty datalist:
<dd><input type="number">
<dt>Datalist without valid options:
<dd><input type="number" list="dl1">
<dt>Empty datalist becomes non-empty:
<dd><input type="number" list="dl1">
<dt>Datalist becomes empty:
<dd><input type="number">
<dt>Datalist disappears:
<dd><input type="number">
<dt>No datalist with the speicified ID:
<dd><input type="number">
<dt>No datalist with the speicified ID, then it appears:
<dd><input type="number" list="dl1">
</dl>
</body>
</html>
